<template>
  <div id="my-map"></div>
</template>

<script>
import { TCesium } from './js/TCesium'
import { satelliteModel } from './js/TModels'
export default {
  name: "HomeView",
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.mapObject = new TCesium('my-map');  // 注意，这个my-map就是我们div的id
      this.viewer = this.mapObject.viewer; // 确保获取 viewer 对象
      this.addModel('wjw-001', '测试模型', 117, 36, 1000000, 0, 0, 0);
    },
      /**
   * 添加卫星模型  - by wjw
   * @param lon 经度
   * @param lat 纬度
   * @param height 高度
   * @param heading 航向角
   * @param pitch 俯仰角
   * @param roll 转向角度
   * @param id 模型唯一标识符
   * @param description 描述
   */
  addModel(id, description, lon, lat, height, heading, pitch, roll) {
  	// 模型位置信息
    let position = Cesium.Cartesian3.fromDegrees(lon, lat, height);
    // 设置模型方向
    let hpRoll = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(heading), Cesium.Math.toRadians(pitch), Cesium.Math.toRadians(roll));
    let orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpRoll);
    // 向蓝星添加模型，返回模型对象
    let model = this.viewer.entities.add(satelliteModel(id, position, orientation, description));
    return model
  }

  }
};
</script>

<style scoped>
#my-map {
  width: 100%;
  height: 100%;
  background-color: black;
}
</style>
